{%- macro _build_fake_link_list(n, group_name) -%}
{%- for i in range(n) -%}
<li>
  <a href="#" class="p-navigation__dropdown-item">
    {{ group_name }} item {{ i + 1 }}
    <br>
    <span class="u-text--muted">Description for {{ group_name }} item {{ i + 1 }}</span>
  </a>
</li>
{%- endfor -%}
{%- endmacro -%}

{%- macro _build_fake_quick_links(n, group_name) -%}
<li class="p-navigation__dropdown-item no-hover">
  <ul class="p-list p-navigation__secondary-links">
    <li class="p-list__item">
      <h2 class="p-muted-heading" tabindex="0">Quick links</h2>
    </li>
    {%- for i in range(1, n + 1) -%}
    <li class="p-list__item">
      <a class="p-navigation__secondary-link" href="#quick-link-{{ i }}" tabindex="0">{{ group_name }} quick link {{ i }}</a>
    </li>
    {%- endfor -%}
  </ul>
</li>
{%- endmacro -%}

{%- macro _build_fake_button_link(group_name) -%}
<li class="p-navigation__dropdown-item">
  <a href="#" class="p-link--inverted">
    <span>{{ group_name }}</span>
    <br>
    <small class="u-text--muted">Description for {{ group_name }} item</small>
  </a>
  <br>
  <a href="#" class="p-button--positive u-no-margin">{{ group_name }}</a>
</li>
{%- endmacro -%}

{%- macro _build_fake_dropdown_items(group_name, links_count, has_cta_button=False, sub_links_count=15, quick_links_count=0) -%}
{%- for i in range(1, links_count + 1) -%}
{%- set subgroup_id = group_name ~ '-group-' ~ i -%}
{%- set subgroup_name = group_name ~ ' ' ~ i -%}
<li class="p-navigation__item--dropdown-toggle js-navigation-dropdown-toggle" id="{{ subgroup_id }}">
  <button aria-controls="{{ subgroup_id }}-menu" class="p-navigation__link">
    {{ subgroup_name }}
  </button>
  <ul class="p-navigation__dropdown is-collapsed js-dropdown-nav-list js-navigation-sliding-panel" id="{{ subgroup_id }}-menu" aria-hidden="true">
    <li class="p-navigation__item--dropdown-close" id="{{ subgroup_id }}-back">
      <button aria-controls="{{ subgroup_id }}-menu" class="p-navigation__link js-back-button">
        Back
      </button>
    </li>
    {%- if has_cta_button -%}
      {{ _build_fake_button_link(subgroup_name) }}
    {%- endif -%}
    {{ _build_fake_link_list(sub_links_count, subgroup_name) }}
    {%- if quick_links_count > 0 -%}
      {{ _build_fake_quick_links(quick_links_count, subgroup_name) }}
    {%- endif -%}
  </ul>
</li>
{%- endfor -%}
{%- endmacro -%}

{%- macro build_fake_dropdown(id, title, is_open=False, links_count=3, has_cta_button=False, sub_links_count=16, quick_links_count=0) -%}
<div class="p-navigation__dropdown is-full-width {% if not is_open %}is-collapsed{% endif %} js-navigation-sliding-panel"  data-level="1" id="{{ id }}" {%- if not is_open -%}aria-hidden="true"{%- endif -%}>
  <div class="p-navigation__dropdown-content--sliding">
    <ul class="p-list u-no-margin js-dropdown-nav-list">{# TODO: use p-list temporarly, we will later have more specific styling class name for it #}
      <li class="p-navigation__item--dropdown-close" id="{{ id }}-back">
        <button aria-controls="{{ id }}" class="p-navigation__link js-back-button">
          Back
        </button>
      </li>
      {{ _build_fake_dropdown_items(title, links_count, has_cta_button, sub_links_count, quick_links_count) }}
    </ul>
  </div>
  <div class="p-navigation__dropdown-content--full-width">
    <div class="p-strip is-shallow">
      <div class="row">
        <div class="col-9">
          <p class="p-muted-heading">{{ title }}</p>
          <div class="row  u-no-margin u-no-padding">
            <div class="col-3">
              <ul class="p-list--divided">
                <li class="p-list__item">
                  {{ title }} 1<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
                <li class="p-list__item">
                  {{ title }} 2<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
                <li class="p-list__item">
                  {{ title }} 3<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
              </ul>
            </div>
            <div class="col-3">
              <ul class="p-list--divided">
                <li class="p-list__item">
                  {{ title }} 3<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
                <li class="p-list__item">
                  {{ title }} 4<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
                <li class="p-list__item">
                  {{ title }} 5<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
              </ul>
            </div>
            <div class="col-3">
              <ul class="p-list--divided">
                <li class="p-list__item">
                  {{ title }} 7<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
                <li class="p-list__item">
                  {{ title }} 8<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
                <li class="p-list__item">
                  {{ title }} 9<br />
                  <small class="u-text--muted">Subtitle...</small>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-3">
          <p class="p-muted-heading">Quick links</p>
          <ul class="p-list js-dropdown-nav-list">
            <li class="p-list__item"><a href="#quicklink">Quick link 1</a></li>
            <li class="p-list__item"><a href="#quicklink">Quick link 2</a></li>
            <li class="p-list__item"><a href="#quicklink">Quick link 3</a></li>
            <li class="p-list__item"><a href="#quicklink">Quick link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{%- endmacro -%}
